<template>
    <div class="login">
        <el-form class="form" :model="ruleForm" ref="ruleFormRef" :rules="rules">
            <h2>小鹿线基础框架</h2>
            <el-form-item>
                <el-input v-model="ruleForm.username" placeholder="用户名" prefix-icon="user"></el-input>
            </el-form-item>
            <el-form-item>
                <el-input v-model="ruleForm.password" placeholder="密码" type="password" prefix-icon="lock"></el-input>
            </el-form-item>
            <div style="display: flex;">
                <el-input v-model="ruleForm.captcha" prefix-icon="CircleCheck" clearable
                    placeholder="请输入验证码"></el-input>
                <el-image class='code' :src="captchaUrl" @click="getCaptcha"></el-image>
            </div>
            <el-form-item>
                <el-checkbox label="记住密码" value="Value 1" />
            </el-form-item>
            <el-button @click="login(ruleFormRef)" type="primary" style="width: 100%;">登 录</el-button>
        </el-form>
    </div>
</template>

<script setup>
import { reactive, ref, onBeforeMount } from 'vue';
import { captchaImage, loginByJson } from '@api/login'
// import { getInfo, getUserMenu } from '@api/user'
import { Encrypt } from '@utils/aes.ts'
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import { useUserStore} from "@store/useUserStore";
import { useMenuStore } from "@store/useMenuStore";

const getCaptcha = async () => {
    const key = new Date().getTime().toString()
    ruleForm.key = key
    let res = await captchaImage({ key })
    let blob = new Blob([res], { type: 'application/vnd.ms-excel' });
    let imgUrl = URL.createObjectURL(blob);
    captchaUrl.value = imgUrl;
}

const router = useRouter()
const login = async (formEl) => {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            console.log('submit!')
            let token
            let res = await loginByJson({
                username: Encrypt(ruleForm.username),
                password: Encrypt(ruleForm.password),
                key: ruleForm.key,
                captcha: ruleForm.captcha,
            })
            token = res.data
            localStorage.setItem('TOKEN', token || '');
            if (res.code == '200') {
                ElMessage({
                    type: "success",
                    message: "登录成功"
                })
                await useUserStore().getUserInfo();
                await useMenuStore().getMenu();
                router.push('/')
            }
            // console.log(res, "res");
        } else {
            console.log('error submit!', fields)
        }
    })
}

onBeforeMount(() => {
    getCaptcha()
})

const ruleFormRef = ref()
const captchaUrl = ref("")
const ruleForm = reactive({
    username: 'admin',
    password: '123456',
    key: '',
    captcha: '',
})

const rules = reactive({
    username: [
        { required: true, message: '请填写账号', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请填写密码', trigger: 'blur' },
    ],
    captcha: [
        { required: true, message: '请填写验证码', trigger: 'blur' },
    ],
})


</script>


<style lang='scss' scoped>
.code {
    margin-left: 10px;
    width: 100px;
    height: 40px;
    cursor: pointer;
}

.login {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url('http://uat.admin.banlu.xuexiluxian.cn/assets/login_bg.1131b254.webp') no-repeat top center;
    background-image: cover;
}

.form {
    padding: 3rem 2rem;
    width: 400px;
    background: #fff;

    h2 {
        text-align: center;
    }
}
</style>